//从后台获取所有数据
$(function (){
    getinfo()
    function getinfo() {
        $.ajax({
            type: "post",
            url: "car/getCars.do",
            success: function (res) {
                $("#tbody").empty();  // 清空 tbody 内容

                // 遍历响应数据并动态生成表格行
                for (let i = 0; i < res.length; i++) {
                    // 创建第一行
                    let tr1 = $("<tr></tr>");
                    let td1 = $("<td></td>").attr("colspan", "8").addClass("shopInfo");

                    td1.append("店铺：")
                        .append($("<a></a>").attr("href", "#").text(res[i].store.sname))
                        .append(" 卖家：")
                        .append($("<a></a>").attr("href", "#").text(res[i].business.bname))
                        .append(" ")
                        .append($("<img />").attr("src", "images/taobao_relation.jpg").attr("alt", "relation"));

                    tr1.append(td1);

                    // 创建第二行
                    let tr2 = $("<tr></tr>").attr("id", "product1");

                    let td2_1 = $("<td></td>").addClass("cart_td_1").append($("<input/>").val(res[i].carid).attr({
                        name: "cartCheckBox",
                        type: "checkbox",
                        class: "cartCheckBox"
                    }));
                    let td2_2 = $("<td></td>").addClass("cart_td_2").append($("<img/>").attr({
                        src: res[i].goods.img,
                        alt: "shopping"
                    }));
                    let td2_3 = $("<td></td>").addClass("cart_td_3");
                    // 添加商品名称
                    td2_3.append($("<a></a>").attr("href", "#").text(res[i].goods.gname))
                        .append("<br/>");
                    // 如果颜色数据存在，才添加颜色信息
                    if (res[i].color && res[i].color.cname) {
                        td2_3.append("颜色：" + res[i].color.cname + " ");
                    }
                    // 如果尺码数据存在，才添加尺码信息
                    if (res[i].numbersize && res[i].numbersize.nname) {
                        td2_3.append("尺码：" + res[i].numbersize.nname + "<br/>");
                    }
                    // 添加保障图标
                    td2_3.append("保障：")
                        .append($("<img />").attr({src: "images/taobao_icon_01.jpg", alt: "icon"}));
                    let td2_4 = $("<td></td>").addClass("cart_td_4").text(res[i].goods.integral);
                    let td2_5 = $("<td></td>").addClass("cart_td_5").text(res[i].goods.gprice);
                    let td2_6 = $("<td></td>").addClass("cart_td_6")
                        .append($("<img/>").attr({src: "images/taobao_minus.jpg", alt: "minus", class: "hand"}))
                        .append($("<input />").attr({
                            id: "num_1",
                            type: "text",
                            value: "1",
                            class: "num_input",
                            readonly: "readonly"
                        }))
                        .append($("<img />").attr({src: "images/taobao_adding.jpg", alt: "add", class: "hand"}));
                    let td2_7 = $("<td></td>").addClass("cart_td_7");
                    let td2_8 = $("<td></td>").addClass("cart_td_8").append($("<a href='javascript:void(0)'></a>")
                        .text("删除")
                        .click(function () {
                            del(res[i].carid);
                        }));

                    // 将所有 td 添加到 tr2
                    tr2.append(td2_1, td2_2, td2_3, td2_4, td2_5, td2_6, td2_7, td2_8);

                    // 将两行添加到 tbody
                    $("#tbody").append(tr1, tr2);
                }
                ifAllChecked()
                productCount();//数据加载完后运行
            }
        })
    }
	//点击复选框全选或全不选效果
    $("#allCheckBox").click(function(){
        var checked=$(this).is(":checked");
        $(".cart_td_1").children().attr("checked",checked);
    });
    //判断单选情况，是否全选，若全选，全选就自动勾上，若没有有全选，但是选择了一部分，就转变为不确定状态
    //若一个都没有选择，就变为不选择状态
    function ifAllChecked() {
        $(".cartCheckBox").on("change", function () {
            let ischecked = $(".cartCheckBox:checked").length
            let allChecked = $(".cartCheckBox").length
            $("#allCheckBox").prop("indeterminate",ischecked>0 && allChecked > ischecked)
            $("#allCheckBox").prop("checked",allChecked === ischecked)
        });
    }
	//计算总价与小计
    function productCount(){
        var $tr=$("#shopping").find("tr[id]");
        var summer=0;
        var integral=0;
        $tr.each(function(i,dom){
            var num=$(dom).children(".cart_td_6").find("input").val();//商品数量
            var price=num*$(dom).children(".cart_td_5").text();//商品小计
            $(dom).children(".cart_td_7").html(price);//显示商品小计
            summer+=price;//总价
            integral+=$(dom).children(".cart_td_4").text()*num;//积分
        });
        $("#total").text(summer);
        $("#integral").text(integral);
    }

    //商品增加减少，flag为true时增加，flag为false时减少
    function changeNumber(dom,flag){
        var $input = $(dom).parent().find("input");
        var value = $input.val();
        if(flag){
            value++;
        }else{
            value--;
            if(value<=0){
                value=1;
                alert("宝贝数量必须大于0");
            }
        }
        $input.val(value);
        productCount();
    };
// 使用事件委托来绑定动态生成的元素的点击事件

// 点击增加
    $(document).on('click', ".cart_td_6 img[alt='add']", function(){
        changeNumber(this, true);
    });

// 点击减少
    $(document).on('click', ".cart_td_6 img[alt='minus']", function(){
        changeNumber(this, false);
    });

// 点击删除
    function del(id){
        let ids = []
        ids.push(id)
        if (confirm("确定要删除吗？")){
            $.ajax({
                type:"post",
                url:"car/delcCar.do",
                contentType:"application/json",
                data:JSON.stringify(ids),
                success:function (res){
                    if (res=="true"){
                        getinfo()
                    }
                }
            })
        }
    };

    //点击删除所选
    $("#deleteAll").click(function(){
        let ids = []
        $(".cartCheckBox:checked").each(function () {
            ids.push($(this).val());
        });
        if(ids.length==0){
            alert("至少要选择一个")
        } else {
            if (confirm("确定要删除吗？")) {
                $.ajax({
                    type: "post",
                    url: "car/delcCar.do",
                    contentType: "application/json",
                    data: JSON.stringify(ids),
                    success: function (res) {
                        if (res == "true") {
                            getinfo()
                        }
                    }
                })
            }
        }
    });
});
